@extends('layouts.scaffold')

@section('head')
	{{ HTML::style('styles/gameList.css')}}

	<script type="text/javascript">
		var GamesController = function($scope, $http)
		{
			$scope.games = {{$result}};
			console.log($scope.games);
			$scope.deleteMessage;
			$scope.showAlert;
			$scope.gameToDelete;

			for (var i = 0; i < $scope.games.length; i++)
			{
				if($scope.games[i].activo == true)
				{
					$scope.games[i].status = "info";
				}
			}


			$scope.status = "";

			//-----------------------------show alert---------------------------
			$scope.remove = function(game)
			{
				$scope.gameIdToDelete = game.id;
				$scope.deleteMessage = "Está prestes a eliminar o jogo " + game.nome + ". Tem a certeza que pretende continuar?";
				$scope.showAlert = true;
			}

			//-----------------------------buttons from alert message-----------
			$scope.cancel = function()
			{
				$scope.showAlert = false;
			}

			$scope.confirm = function()
			{
				$http({
		            url: location.origin + location.pathname + "/eliminar" ,
		            method: "POST",
		            data: { "gameId" : $scope.gameIdToDelete }
		        }).success(function(data, status, headers, config) {
		        	$scope.games = data.games;
		        	$scope.showAlert = false;
		        	for (var i = 0; i < $scope.games.length; i++)
					{
						if($scope.games[i].activo == true)
						{
							$scope.games[i].status = "info";
						}
					}

		        }).error(function(data, status, headers, config) {
		        	console.log('ko');
		        	
		    	});
			}

			$scope.activate = function(game)
			{
				$http({
		            url: location.origin + location.pathname + "/activar" ,
		            method: "POST",
		            data: { "gameId" : game.id }
		        }).success(function(data, status, headers, config) {
		        	$scope.games = data.games;
		        	for (var i = 0; i < $scope.games.length; i++)
					{
						if($scope.games[i].activo == true)
						{
							$scope.games[i].status = "info";
						}
					}

		        }).error(function(data, status, headers, config) {
		        	console.log('ko');
		        	
		    	});
			}
		}
	</script>
@endsection

@section('navbar')
	@include('menu.navbar')
@endsection

@section('main')
<div ng-controller="GamesController" class="panel panel-primary">
	<div class="panel-primary">
		<h2 class="panel-heading">Lista de Jogos</h2>
	</div>
	

	<div class="panel-body">
		<div class="row">
			<div class="col-md-9">
				<table class="table table-hover">
					<tr>
						<th class="col-md-3"><center>Nome</center></th>
						<th class="col-md-1"><center>Equipas</center></th>
						<th class="col-md-3"><center>Empresa</center></th>
						<th class="col-md-2"><center>Data</center></th>
						<th class="col-md-1">&nbsp;</th>
						<th class="col-md-1">&nbsp;</th>
						<th class="col-md-1">&nbsp;</th>
					</tr>
					<tr ng-repeat="game in games" class="[[game.status]]" ng-click="activate(game)">
						<td ng-bind="'&nbsp;&nbsp;&nbsp;&nbsp;'+game.nome"></td>
						<td><center ng-bind="game.numEquipas"></center></td>
						<td><center ng-bind="game.empresa"></center></td>
						<td><center ng-bind="game.data"></center></td>
						<td><a ng-click="remove(game)" class="btn btn-small"><i class="glyphicon glyphicon-trash"></i></a></td>
						<td><a href="{{{URL::to('jogos/[[game.id]]/editar')}}}" class="btn btn-small"><i class="glyphicon glyphicon-pencil"></i></a></td>
						<td><i id="jogoActivo" ng-show="game.activo" class="glyphicon glyphicon-ok"></i></td>
					</tr>
				</table>
				
			</div>
			<div class="col-md-3 alert">
				<!-- Alert: Delete game alert -->
				<div ng-if="showAlert" ng-init="false">
				    <div class="alert alert-warning fade in" role="alert" id="alert">
				        <h4>Eliminar jogo!</h4>
				        <p ng-bind="deleteMessage"></p>
				        <p><center>
				            <button ng-click="confirm()" class="btn btn-warning btnAlert" type="button">Eliminar</button>
				            <button ng-click="cancel()"  class="btn btn-default btnAlert" type="button">Cancelar</button>
				        </center></p>
				    </div>
				</div>
			</div>
		</div>

		<div class="botao col-md-2">
			<a href="{{URL::to('novojogo')}}" class="panel-heading btn btn-primary btn-block" >Novo Jogo</a>
		</div>
	</div>
</div>
@endsection